define([
    'angular-animate',
    'angular-ui-bootstrap',
    'js/directives/markdown',
    'js/directives/go-back',
    'js/directives/form-table',
    'js/directives/url-select',
    'js/directives/item-editor'
], function() {
    var directive = angular.module('app.directive', [
            'ngAnimate',
            'ui.bootstrap',
            'ng-showdown',
            'app.directive.markdown',
            'app.directive.goBack',
            'app.directive.formTable',
            'app.directive.urlSelect',
            'app.directive.itemEditor'
        ]);

    // Tooltip
    directive.config(['$uibTooltipProvider', function($uibTooltipProvider) {
        $uibTooltipProvider.options({
            animation: false,
            appendToBody: false,
            placement: 'auto',
            popupCloseDelay: 0,
            popupDelay: 0,
        });
    }]);

    // Off autocomplete
    directive.directive('form', function() {
        return {
            restrict: 'E',
            link: function(scope, element) {
                element.attr('autocomplete', 'off');
            }
        };
    });

    // Autofocus
    directive.directive('autofocus', function() {
        return {
            restrict: 'A',
            link: function(scope, element) {
                element[0].focus();
            }
        };
    });

    // View body move-zone
    directive.directive('movezone', ['$timeout', function($timeout) {
        return {
            restrict: 'A',
            scope: {
                movezone: '='
            },
            link: function(scope, element) {
                var $left = $('>div:eq(0)', element);
                var $right = $('>div:eq(-1)', element);

                var zoneLeft = scope.movezone.left;
                if (!zoneLeft) {
                    if (scope.movezone.ratio < 0) {
                        var leftWidth = $left.width();
                        zoneLeft = leftWidth / (leftWidth + $right.width());
                    } else {
                        zoneLeft = scope.movezone.ratio / (scope.movezone.ratio + 1);
                    }
                    zoneLeft *= 100;
                }
                $left.css('width', zoneLeft + '%');
                $right.css('width', (100 - zoneLeft) + '%');
                $('<div class="x-movezone">').insertAfter($left);
                $('<div class="x-movebar" title="调整列宽">')
                    .css({ 'position': 'absolute', 'left': zoneLeft + '%' })
                    .draggable({
                        axis: 'x',
                        delay: 200,
                        containment: $('.x-movezone', element),
                        drag: function(event, ui) {
                            var percent = 100 * ui.position.left / element.width();
                            $left.css('width', percent + '%');
                            $right.css('width', (100 - percent) + '%');
                        },
                        stop: function(event, ui) {
                            var percent = 100 * ui.position.left / element.width();
                            $(this).css('left', percent + '%');
                            $timeout(function() {
                                scope.movezone.left = percent;
                                scope.$emit('@zone.resize', percent);
                            });
                        }
                    })
                    .insertAfter($left);
            }
        };
    }]);

    return directive;
});
